<!DOCTYPE html>
<html class="ui-mobile landscape min-width-320px min-width-480px min-width-768px min-width-1024px" lang="de">                       
  <head>                                       
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">	                                        <meta charset="utf-8">	                                        
    <meta name="viewport" content="width=device-width, initial-scale=1">                                       

<?php
 define("actorfile", "actors.conf");
 $actors;
function getActors($file) {
// Einlesen der Aktoren aus Konfigurationsdatei         
      $i = 0;   
      foreach(file($file) as $contentline) {
         $aktoren[$i] = explode(';', $contentline);
         $i = $i + 1;
       }
       return $aktoren;
 }


$actors = getActors(actorfile);

 ?>





    <title>                                                       
      Heimautomatisierung                                       
    </title>                                          
    <link rel="stylesheet" href="index_files/jquery.css">          
<script src="index_files/jquery-1.js"></script>                  
<script src="index_files/jquery.js"></script>                  
<script src="index_files/lightman.js.php"></script> 
<script src="index_files/popup.js"></script>              
<script type="text/javascript"> 	
if (navigator.appName != 'Microsoft Internet Explorer')
	{
	addEventListener("load", function() {setTimeout(function() { window.scrollTo(0, 1); }, 0); }, false); 
	}
if (navigator.userAgent.indexOf('Android') != -1)
	{
	addEventListener("scroll", function() {setTimeout(function() {ShowHide()},10);}, false); 
	}
self.setTimeout('UpdateTemp();',3000);        
</script>                
<script>
function dim   () {
var dimlevel = document.getElementById('slider-2').value   ;
var lv_request = "CMD=dim&ID=10&DL=" + dimlevel;
request(lv_request);
}   
</script>                                              
    <style type="text/css">                                                          
      <!--
             body {
               background-color: white;
               margin:0px;
               padding:0px;
               font-family: Arial, Helvetica, Sans Serif;
               color: #55F;
               font-size: x-large;
             }
             #page {
               width: 300px;
                 margin: 0px auto ;
                 border: 0px black dotted;
                 /* height: 100px; */
                 padding: 10px ; 
                 position: relative;
                 background-color: white;
             }
              h1 {
                color: black;
                float: left;
              }
              .clear {
                clear:both;
              }
              img {
                float:left;
                margin: 0px 8px 2px 0px ;
              }
              div[data-role="header"]  h1 {
                color: white;
              }
              div[data-role="content"] {
              background-color: white;
              }
              .state
            	{
            		position: absolute; 
                left: -20%;
            		text-align: center; 
            		z-index: 2; 
            		margin: 25% 25% 25% 25%; 
            		top: 0px; 
            		width: 90%;
            		height:20%; 
            		visibility: hidden;
            		-moz-border-radius: 25px; 
            		-webkit-border-radius: 25px; 
            		opacity: 0.8; 
            		color: #ffffff; 
            		font-family: verdana; 
            		font-size: 2.5em; 
            		background: #77bb55;
            		border: 4px;
            		border-color: #639210;
            		border-style: solid;
            	}
              .popup
            	{
            		position: absolute; 
                left: -20%;
            		text-align: center; 
            		z-index: 2; 
            		margin: 25% 25% 25% 25%; 
            		top: 0px; 
            		width: 90%;
            		height:20%; 
            		visibility: hidden;
            		-moz-border-radius: 25px; 
            		-webkit-border-radius: 25px; 
            		opacity: 0.8; 
            		color: #000000; 
            		font-family: verdana; 
            		font-size: 2.5em; 
            		background: #bbddff;
            		border: 4px;
            		border-color: #639210;
            		border-style: solid;
            	}
                                                        //-->                                                  
    </style>             
<script>
  $('div[data-role="page"]').live('pagecreate',function(event) {
  // alert('This page was just enhanced by jQuery Mobile!');
    $('div.ui-page').live("swipeleft", function(){
      var nextpage = $(this).next('div[data-role="page"]');
      if (nextpage.length > 0) {
        $.mobile.changePage(nextpage, 'slide');
      }
    });
    $('div.ui-page').live("swiperight", function(){
      var prevpage = $(this).prev('div[data-role="page"]');
      if (prevpage.length > 0) {
        $.mobile.changePage(prevpage, 'slide', true);
      }
    });
  })
  
        
</script>                                      
  </head>                          
  <body class="ui-mobile-viewport">                                       
    <!-- Div für die Statusausgabe -->                                                 
    <div id="status" class="state">                                       
    </div> 
    <!-- Div für das Popup zur Helligkeitssteuerung der decke-->                                                 
    <div id="decke" class="popup" data-theme="e">
    <table style="width:100%; border: solid 2px green; height:100%; text-align: center; " border=2>
     <tr style="height:50%">
                <td class="ACTUATOR_CMD" onclick="request('IT D 1 ON')" align=center >  
                                    
              <img src="Pictures/on.gif" >                            
                            
                                                                                                                                                                          
           </td>                                                                                                                                                         
                <td class="ACTUATOR_CMD" onclick="request('IT D 1 OFF')" align=center>   
                                    
              <img src="Pictures/off.gif" >                              
            </td>                                                                                                                                                                 
                  
    </tr>
    <tr style="heigth:50%">
    <td colspan=2>
       <table class="dimTAB" style="width:100%; border: solid 0px green; height:100%">                                                                                                                                                                                                 
                    <tr>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=9&DL=15');" bgcolor="#F0F0F0"></td>     
                      <td onclick="request('CMD=dim&ID=9&DL=14');" bgcolor="#E0E0E0"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=9&DL=13');" bgcolor="#D0D0D0"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=9&DL=12');" bgcolor="#C0C0C0"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=9&DL=11');" bgcolor="#B0B0B0"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=9&DL=10');" bgcolor="#A0A0A0"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=9&DL=9');" bgcolor="#909090"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=9&DL=8');" bgcolor="#808080"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=9&DL=7');" bgcolor="#707070"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=9&DL=6');" bgcolor="#606060"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=9&DL=5');" bgcolor="#505050"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=9&DL=4');" bgcolor="#404040"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=9&DL=3');" bgcolor="#303030"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=9&DL=2');" bgcolor="#202020"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=9&DL=1');" bgcolor="#101010"></td>                                                                                                                                                                                                 
                    </tr>                                                                                                                                                             
                  </table>   
    
    </td>
    </tr>

    </table>
    
                                             
    </div>    
    
  <!-- Div für das Popup zur Helligkeitssteuerung der decke-->                                                 
    <div id="ecke" class="popup" data-theme="e">
    <table style="width:100%; border: solid 2px green; height:100%; text-align: center; " border=2>
     <tr style="height:50%">
                <td class="ACTUATOR_CMD" onclick="request('IT D 1 ON')" align=center >  
                                    
              <img src="Pictures/on.gif" >                            
                            
                                                                                                                                                                          
           </td>                                                                                                                                                         
                <td class="ACTUATOR_CMD" onclick="request('IT D 1 OFF')" align=center>   
                                    
              <img src="Pictures/off.gif" >                              
            </td>                                                                                                                                                                 
                  
    </tr>
    <tr style="heigth:50%">
    <td colspan=2>
       <table class="dimTAB" style="width:100%; border: solid 0px green; height:100%">                                                                                                                                                                                                 
                    <tr>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=15');" bgcolor="#F0F0F0"></td>     
                      <td onclick="request('CMD=dim&ID=10&DL=14');" bgcolor="#E0E0E0"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=13');" bgcolor="#D0D0D0"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=12');" bgcolor="#C0C0C0"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=11');" bgcolor="#B0B0B0"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=10');" bgcolor="#A0A0A0"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=9');" bgcolor="#909090"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=8');" bgcolor="#808080"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=7');" bgcolor="#707070"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=6');" bgcolor="#606060"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=5');" bgcolor="#505050"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=4');" bgcolor="#404040"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=3');" bgcolor="#303030"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=2');" bgcolor="#202020"></td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=1');" bgcolor="#101010"></td>                                                                                                                                                                                                 
                    </tr>                                                                                                                                                             
                  </table>   
    
    </td>
    </tr>

    </table>
    
                                             
    </div>                         
    <!-- Div als Willkommenseite, nötig wegen eines Bugs im Framework -->                 
    <div data-url="Willkommen" data-role="page" data-fullscreen="true"  id="Willkommen" data-theme="a">                                                                                                                 
      <div data-role="content" >                    
        <div style="position:absolute; top:90px; left:40px; z-index=4>   
          <p style="align:center"><img src="pictures/gluehbirne.png">
         </p>                                                                             
          <p>Willkommen bei der Lichtsteuerung für Tobys Wohnung              
            <br>          nach links wischen um das Licht zu steuern                                                                    
          </p>                                  
          <table class="ACTUATORTAB" width=100%>                                                                                                                        
            <tr>                                                                                                                                     
              <td class="ACTUATOR">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                     
              <td class="ACTUATOR_CMD">                                                                                                                                                         
                <input class="SB2" type="SUBMIT" value="Alles aus" onclick="request('SCENE 10');"></td>                                                                                                                                     
              <td class="ACTUATOR_CMD">                                                                                                                                                         
                <input class="SB2" type="SUBMIT" value="Gute Nacht" onclick="request('SCENE 9');"></td>                                                                                                                 
            </tr>                                                                                                               
          </table>                                                              
        </div>               
      </div>                                                        
      <!-- Content -->                                                                     
      <div data-role="footer" data-position="fixed">Los geht's......                                                          
      </div>                                            
    </div>                                           
    <!-- Ende page -->        

        
    <div data-url="actuators" data-role="page" data-fullscreen="true" data-theme="e" id="Aktoren">                                                                                                                 
      <div data-role="content">                      
        <div style="position:absolute; top:8px; left:0px; z-index=4; border:solid 0px blue; width:100%; min-height:100%">             
          <div id="links" style="position:absolute; width:100%; max-width:100%; border:solid 0px blue; min-height:100%; min-width=100%; overflow:auto">         
          <table style="width:100%; border: solid 0px green; height:100%">                                     


<?PHP
// Für jeden Aktor eine Tabellenzeile erstellen, wenn Dimmbarer Aktor, dasnn zusätzlich noch Dimmlevel Zeile

foreach($actors as $actor) {

		echo '     <tr> <td class="ACTUATOR">';
    echo $actor[1];                             //Name des Aktors
    echo '</td>', PHP_EOL;
    echo '        <td class="ACTUATOR_CMD"><input class="SB2" type="SUBMIT" value="EIN" onclick="request(\'' , $actor[0] , '\', \'ON\', \'\');"></td>', PHP_EOL;
		echo '        <td class="ACTUATOR_CMD"><input class="SB2" type="SUBMIT" value="AUS" onclick="request(\'' , $actor[0] , '\', \'OFF\', \'\');"></td>', PHP_EOL;
		echo '</tr>', PHP_EOL;
    if ($actor[5] == 'DIM') {
   
    echo  '   <tr>', PHP_EOL;                                                                                                                                                 
    echo  '      <td colspan="3">' , PHP_EOL;  
     print_dim_tab($actor[0]);
    echo  '      </td>' , PHP_EOL;                                                                                            
    echo  '   </tr>' , PHP_EOL; 



  
    }   
//var_dump($html);
}


function print_dim_tab($actor) {

                                                                                                                                                                  
    echo            '      <table class="dimTAB" style="width:100%; border: solid 0px green; height:100%">' , PHP_EOL;                                                                                                                                                                                         
    echo            '          <tr>' , PHP_EOL; 
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'15\');" bgcolor="#F0F0F0">&nbsp;&nbsp;&nbsp;&nbsp;<br><br></td>' , PHP_EOL;  
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'14\');" bgcolor="#E0E0E0">&nbsp;&nbsp;&nbsp;&nbsp;</td>' , PHP_EOL; 
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'13\');" bgcolor="#D0D0D0">&nbsp;&nbsp;&nbsp;&nbsp;</td>' , PHP_EOL; 
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'12\');" bgcolor="#C0C0C0">&nbsp;&nbsp;&nbsp;&nbsp;</td>' , PHP_EOL;
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'11\');" bgcolor="#B0B0B0">&nbsp;&nbsp;&nbsp;&nbsp;</td>' , PHP_EOL;
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'10\');" bgcolor="#A0A0A0">&nbsp;&nbsp;&nbsp;&nbsp;</td>' , PHP_EOL;
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'9\');" bgcolor="#909090">&nbsp;&nbsp;&nbsp;&nbsp;</td>' , PHP_EOL;
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'8\');" bgcolor="#808080">&nbsp;&nbsp;&nbsp;&nbsp;</td>' , PHP_EOL;
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'7\');" bgcolor="#707070">&nbsp;&nbsp;&nbsp;&nbsp;</td>' , PHP_EOL;
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'6\');" bgcolor="#606060">&nbsp;&nbsp;&nbsp;&nbsp;</td>' , PHP_EOL;                                    
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'5\');" bgcolor="#505050">&nbsp;&nbsp;&nbsp;&nbsp;</td>' , PHP_EOL;
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'4\');" bgcolor="#404040">&nbsp;&nbsp;&nbsp;&nbsp;</td>' , PHP_EOL;
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'3\');" bgcolor="#303030">&nbsp;&nbsp;&nbsp;&nbsp;</td>' , PHP_EOL;
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'2\');" bgcolor="#202020">&nbsp;&nbsp;&nbsp;&nbsp;</td>' , PHP_EOL;
    echo            '            <td onclick="request(\'' , $actor , '\', \'DIM\', \'1\');" bgcolor="#101010">&nbsp;&nbsp;&nbsp;&nbsp;</td>' , PHP_EOL;
                  
    echo            '         </tr>' , PHP_EOL;                                                                                                                                                                                       
    echo            '      </table>' , PHP_EOL;          


}                                                                                 
 /*                                                                                                                                                
                                                                                                                                                                                                            
                      <td onclick="request('CMD=dim&ID=9&DL=15');" bgcolor="#F0F0F0">&nbsp;&nbsp;&nbsp;&nbsp;<br><br><br></td>                                                                                                                                                                                                             
                      <td onclick="request('CMD=dim&ID=9&DL=14');" bgcolor="#E0E0E0">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                             
                      <td onclick="request('CMD=dim&ID=9&DL=13');" bgcolor="#D0D0D0">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                             
                      <td onclick="request('CMD=dim&ID=9&DL=12');" bgcolor="#C0C0C0">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                             
                      <td onclick="request('CMD=dim&ID=9&DL=11');" bgcolor="#B0B0B0">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                             
                      <td onclick="request('CMD=dim&ID=9&DL=10');" bgcolor="#A0A0A0">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                             
                      <td onclick="request('CMD=dim&ID=9&DL=9');" bgcolor="#909090">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                             
                      <td onclick="request('CMD=dim&ID=9&DL=8');" bgcolor="#808080">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                             
                      <td onclick="request('CMD=dim&ID=9&DL=7');" bgcolor="#707070">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                             
                      <td onclick="request('CMD=dim&ID=9&DL=6');" bgcolor="#606060">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                             
                      <td onclick="request('CMD=dim&ID=9&DL=5');" bgcolor="#505050">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                             
                      <td onclick="request('CMD=dim&ID=9&DL=4');" bgcolor="#404040">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                             
                      <td onclick="request('CMD=dim&ID=9&DL=3');" bgcolor="#303030">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                             
                      <td onclick="request('CMD=dim&ID=9&DL=2');" bgcolor="#202020">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                             
                      <td onclick="request('CMD=dim&ID=9&DL=1');" bgcolor="#101010">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                         
                                                                                                                                                        
                                                                                                                          
              <tr>                                                                                                                                                                                            
                <td colspan="3">                                                                                                                                                                             
                  <table class="dimTAB" style="width:100%; border: solid 0px green; height:100%">                                                                                                                                                                                                 
                    <tr>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=15');" bgcolor="#F0F0F0">&nbsp;&nbsp;&nbsp;&nbsp;<br><br><br></td>     
                      <td onclick="request('CMD=dim&ID=10&DL=14');" bgcolor="#E0E0E0">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=13');" bgcolor="#D0D0D0">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=12');" bgcolor="#C0C0C0">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=11');" bgcolor="#B0B0B0">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=10');" bgcolor="#A0A0A0">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=9');" bgcolor="#909090">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=8');" bgcolor="#808080">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=7');" bgcolor="#707070">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=6');" bgcolor="#606060">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=5');" bgcolor="#505050">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=4');" bgcolor="#404040">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=3');" bgcolor="#303030">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=2');" bgcolor="#202020">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                                     
                      <td onclick="request('CMD=dim&ID=10&DL=1');" bgcolor="#101010">&nbsp;&nbsp;&nbsp;&nbsp;</td>                                                                                                                                                                                                 
                    </tr>                                                                                                                                                             
                  </table>                                                                                                                     
              </tr>                                                                        
  
  */
  ?>                          
            </table>              
                                                                         
         
          </div>                                                                               
        </div>                  
      </div>                                                       
      <!-- Content -->                                                                     
      <div data-role="footer" data-position="fixed">Alle Aktoren                                                          
      </div>                                            
    </div>                                           
    <!-- Ende page -->                                                               
    <div data-url="uebersicht" data-role="page" data-fullscreen="true" data-theme="e" id="uebersicht" >                                                                
      <div data-role="content">                                                        
        <div style="position:absolute; top:0px; left:0px; min-height:60px; border:solid 0px blue; padding:5px">                             
          <div id="picture"  >                                    
            <img src="Pictures/Overview.gif" width=100% alt="Overview">                          
          </div>                           
          <!-- Lampen -->                                
          <!-- EZ Deckenlampe -->  
                             
          <div id="EZ_Deckenlampe"  style="position:absolute; top:27%; left:12%; width:8%; height:10%; z-index=3; border:solid 0px blue;">                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;">                                    
              <img src="Pictures/Birne.gif" width=50%>                              
            </div>                          
            <div style="position:absolute; top:0px; left:30%; z-index=4; border:solid 0px blue;" onclick="request('CMD=on&ID=10');">                                    
              <img src="Pictures/on.gif" width=50% >                              
            </div>                            
            <div style="position:absolute; top:80%; left:30%; z-index=4; border:solid 0px blue;" onclick="request('CMD=off&ID=10');">                                    
              <img src="Pictures/off.gif" width=50%>                              
            </div>                      
          </div>      

          <!-- EZ Ecklampe -->                                   
          <div id="EZ_Ecklampe"  style="position:absolute; top:8%; left:26%; height:10%; width:8%; z-index=3; border:solid 0px blue">                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;">                                    
              <img src="Pictures/Birne.gif" width=50%>                              
            </div>                        
            <div style="position:absolute; top:0px; left:30%; z-index=4; border:solid 0px blue;" onclick="request('CMD=on&ID=9');">                                    
              <img src="Pictures/on.gif" width=50%>                              
            </div>                            
            <div style="position:absolute; top:80%; left:30%; z-index=4; border:solid 0px blue;" onclick="request('CMD=off&ID=9');">                                    
              <img src="Pictures/off.gif" width=50%>                              
            </div>                        
          </div>                                     
          <!-- WZ Deckenlampe -->                                   
          <div id="WZ_Deckenlampe"  style="position:absolute; top:65%; left:14%; width:4%; z-index=3; border:solid 0px blue">                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="request('key=1');">                                    
              <img src="Pictures/Birne.gif" width=100%>                              
            </div>                          
          </div>                             
          <!-- WZ Ecke -->                                   
          <div id="WZ_Ecke"  style="position:absolute; top:76%; left:3%; width:4%; z-index=3; border:solid 0px blue" ')>                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="request('key=4');">                                    
              <img src="Pictures/Birne.gif" width=100%>                              
            </div>                          
          </div>                                            
          <!-- WZ Bar -->                                   
          <div id="WZ_Bar"  style="position:absolute; top:70%; left:31%; width:4%; z-index=3; border:solid 0px blue" >                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;"" onclick="request('key=2');">                                    
              <img src="Pictures/Birne.gif" width=100%>                              
            </div>                          
          </div>                                             
          <!-- WZ Heizung -->                                   
          <div id="WZ_Heizung"  style="position:absolute; top:55%; left:12%; width:4%; z-index=3; border:solid 0px blue" )>                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="request('key=3');">                                    
              <img src="Pictures/birne.gif" width=100%>                              
            </div>                          
          </div>                                                 
          <!-- EZ Schrank -->                                   
          <div id="EZ_Schrank"  style="position:absolute; top:7%; left:10%; width:4%; z-index=3; border:solid 0px blue">                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="request('key=7');">                                    
              <img src="Pictures/birne.gif" width=100%>                              
            </div>                          
          </div>                                                        
          <!-- Flur -->                                   
          <div id="Flur"  style="position:absolute; top:65%; left:92%; width:4%; z-index=3; border:solid 0px blue">                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="request('key=8');">                                    
              <img src="Pictures/birne.gif" width=100%>                              
            </div>                          
          </div>                   
        </div>                   

                 


      </div>                                  
      <!-- Content -->                                                                                                
    </div>                                                      
    <!-- Ende page -->   
                                                                                                                                                                                                                                               
   <div data-url="wohnzimmer" data-role="page" data-fullscreen="true" data-theme="e" id="wohnzimmer" >                                                                
      <div data-role="content">                                                        
        <div style="position:absolute; width:100%; top:0px; left:0px; min-height:60px; border:solid 0px blue; padding:5px">                             
          <div id="picture"  >                                    
            <img src="Pictures/wohnzimmer.gif" width=100% alt="Wohnzimmer">                          
          </div>                           
          <!-- Lampen -->                                
          <!-- EZ Deckenlampe -->                                  
                                         
          <div id="EZ_Deckenlampe"  style="position:absolute; top:26%; left:40%; width:8%; height:10%; z-index=3; border:solid 0px blue;">                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="ShowPopup('decke');self.setTimeout('HidePopup(\'decke\');',4000)">                                    
              <img src="Pictures/Birne.gif" width=100%>                              
            </div>                                            
          </div>                                  
          <!-- EZ Ecklampe -->                                   
        
 <div id="EZ_Ecklampe"  style="position:absolute; top:6%; left:75%; height:10%; width:8%; z-index=3; border:solid 0px blue">                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="ShowPopup('ecke');self.setTimeout('HidePopup(\'ecke\');',4000)"   >                                    
              <img src="Pictures/Birne.gif" width=100%>                              
            </div>       
            </div>         
                                       
          <!-- WZ Deckenlampe -->                                   
          <div id="WZ_Deckenlampe"  style="position:absolute; top:67%; left:40%; width:8%; z-index=3; border:solid 0px blue">                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="request('key=1');">                                    
              <img src="Pictures/Birne.gif" width=100%>                              
            </div>                          
          </div>                             
          <!-- WZ Ecke -->                                   
          <div id="WZ_Ecke"  style="position:absolute; top:80%; left:6%; width:8%; z-index=3; border:solid 0px blue" ')>                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="request('key=4');">                                    
              <img src="Pictures/Birne.gif" width=100%>                              
            </div>                          
          </div>                                            
          <!-- WZ Bar -->                                   
          <div id="WZ_Bar"  style="position:absolute; top:70%; left:90%; width:8%; z-index=3; border:solid 0px blue" >                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;"" onclick="request('key=2');">                                    
              <img src="Pictures/Birne.gif" width=100%>                              
            </div>                          
          </div>                                             
          <!-- WZ Heizung -->                                   
          <div id="WZ_Heizung"  style="position:absolute; top:57%; left:30%; width:8%; z-index=3; border:solid 0px blue" )>                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="request('key=3');">                                    
              <img src="Pictures/birne.gif" width=100%>                              
            </div>                          
          </div>                                                 
          <!-- EZ Schrank -->                                   
          <div id="EZ_Schrank"  style="position:absolute; top:5%; left:32%; width:8%; z-index=3; border:solid 0px blue">                                
            <div style="position:absolute; top:0px; left:0px; z-index=4; border:solid 0px blue;" onclick="request('key=7');">                                    
              <img src="Pictures/birne.gif" width=100%>                              
            </div>                          
          </div>                                                        
          <!-- Flur -->                                   
        </div>                   
         </div>                                  
      <!-- Content -->                                                                                                
    </div>                                                     
    <div style="top: 305px;" class="ui-loader ui-body-a ui-corner-all">                                                             
      <span class="ui-icon ui-icon-loading spin">                                                             
      </span><h1>loading</h1>                                             
    </div>
<script> 
    $("#lb_actuators").click(function () { 
    	if (document.getElementById("lb_scenes").style.visibility == "visible")
    	{
    		$("#scenes").slideToggle("slow", function () {$("#actuators").slideToggle("slow");});     	
    	}
    	else
    	{
    		$("#actuators").slideToggle("slow", function () {$("#scenes").slideToggle("slow");});     	
    	}    		
    });
</script>                       
  </body>
</html>
